import React, { Component } from 'react'
import CardContainer from '../component/card.container'
import ReactEcharts from '../lib/echarts-for-react/src/index'
import echarts from '../lib/echarts.js'

class Congyegoucheng extends Component {
  constructor(props) {
    super(props)
  }

  getBarOptions() {
    return {
      color: ['#3398DB'],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: 'shadow'// 默认为直线，可选为：'line' | 'shadow'
        }
      },
      grid: {
        left: '2%',
        top: 0,
        right: '2%',
        bottom: 0,
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: ['A类', 'B类', 'C类', 'D类', 'E类'],
          axisLabel: {
            textStyle: {
              color: '#fff'
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            alignWithLabel: true,
            lineStyle: {
              color: '#00b7eb'
            }
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          splitLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#00b7eb'
            }
          }
        }
      ],
      series: [
        {
          name: '人数',
          type: 'bar',
          barWidth: '14px',
          barGap: '14px',
          data: [10, 52, 200, 334, 260],
          label: {
            show: true,
            position: 'top'
          },
          itemStyle: {
            normal: {
              borderColor: '#00b7eb',
              color: '#01576f',
              opacity: .7
            }
          }
        }
      ]
    }
  }

  getPieOptions(value) {
    return {
      tooltip: {
        show: false
      },
      legend: {
        show: false
      },
      series: [
        {
          type: 'pie',
          name: '',
          hoverAnimation: false,
          radius: ['70%', '100%'],
          startAngle: '225',
          minAngle: '30',
          color: [
            new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(255, 204, 2, 1)'
            }, {
              offset: 1,
              color: 'rgba(255, 204, 2, 0)'
            }]),
            'rgba(0, 0, 0, 0)'
          ],
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          pointer: {
            show: false
          },
          itemStyle: {
            normal: {
              show: false
            }
          },
          label: {
            normal: {
              show: false
            }
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          data: [value, 100 - value]
        }
      ]
    }
  }

  render() {
    let { data } = this.props
    let { gender, edu, total } = data

    return (
      <CardContainer className="row">

        <span className="border-corner border-lt p-left p-top" />
        <span className="border-corner border-rt p-right p-top" />
        <span className="border-corner border-lb p-left p-bottom" />
        <span className="border-corner border-rb p-right p-bottom" />

        <h3>从业人构成</h3>
        <div className="row" style={{ height: '292px' }}>
          <div className="span-50">
            <h4>人才引进</h4>
            <ReactEcharts
              className="span-50"
              option={this.getBarOptions()}
              notMerge={true}
              lazyUpdate={true}
              style={{ height: '220px', width: '200px' }} />
          </div>
          <div className="span-50">
            <h4>性别构成</h4>
            <div className="span-50 span" style={{textAlign: 'center', width: '80px', marginTop: '-20px'}}>
              <ReactEcharts
                option={this.getPieOptions(gender.male)}
                notMerge={true}
                lazyUpdate={true}
                style={{ height: '100px', width: '80px' }} />
                <span className="span-d">男</span>
                <p>{gender.male + '%'}</p>
            </div>
            <div className="span-50 span" style={{textAlign: 'center', width: '80px', float: 'right', marginTop: '-20px'}}>
              <ReactEcharts
                option={this.getPieOptions(gender.female)}
                notMerge={true}
                lazyUpdate={true}
                theme=""
                style={{ height: '100px', width: '80px' }} />
                <span className="span-d">女</span>
                <p>{gender.female + '%'}</p>
            </div>
            <div className="row">
              <h4>学历水平</h4>
              {edu.map((item, index) => {
                return (
                  <div key={index} className="process" style={{ textAlign: 'left' }}>
                    <span className="process-company" style={{ display: 'inline-block', width: '60px', textAlign: 'right' }}>
                      {item.label}
                    </span>
                    <span className="process-bar" style={{ width: item.ratio + '%' }} />
                    <span className="process-pend">{item.pend}</span>
                  </div>
                )
              })}
              <h4>从业人数</h4>
              {total.map((item, index) => {
                return (
                  <div key={index} className="process" style={{ textAlign: 'left' }}>
                    <span className="process-company" style={{ display: 'inline-block', width: '60px', textAlign: 'right' }}>
                      {item.label}
                    </span>
                    <span className="process-bar" style={{ width: item.ratio + '%' }} />
                    <span className="process-pend">{item.pend}</span>
                  </div>
                )
              })}
            </div>
          </div>
        </div>
      </CardContainer>
    )
  }
}

Congyegoucheng.defaultProps = {
  data: require('../api.mock/congyegoucheng.json')
}
export default Congyegoucheng